<script type="text/html" template lay-done="layui.data.done(d);">
    <div class="layui-form coreshop-form layui-form-pane" lay-filter="LAY-app-SysUser-createForm" id="LAY-app-SysUser-createForm">
        <div class="layui-form-item">
            <label for="sex" class="layui-form-label layui-form-required">公司</label>
            <div class="layui-input-block">
                <select name="companyId" lay-verify="required" lay-verify="required|companyId" lay-reqText="请选择公司" lay-filter="select-companyId-filter">
                    <option value="" selected="selected">请选择公司</option>
                    {{# layui.each(d.params.data.company, function(index, item){ }}
                    <option value="{{ item.id }}">{{ item.companyName }}</option>
                    {{# }); }}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="sex" class="layui-form-label layui-form-required">部门</label>
            <div class="layui-input-block">
                <select id="departmentSelect" name="departmentId" lay-reqText="请选择部门" lay-filter="select-departmentId-filter">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="sex" class="layui-form-label layui-form-required">组别</label>
            <div class="layui-input-block">
                <select name="groupId" id="groupIdSelect" lay-verify="required" lay-reqText="请选择组别" lay-filter="select-groupId-filter">
                    <!--<option value="" selected="selected">请选择组别</option>-->
                </select>
            </div>
        </div>
        <!--<div class="layui-inline  layui-input-wrap layui-input-wrap-prefix">
        <label class="layui-form-label layui-form-required">公司：</label>
        <div class="layui-input-inline">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-cols"></i>
            </div>
            <select name="grade">
                <option value="" selected="selected">请选择公司</option>
                {{# layui.each(d.params.data, function(index, item){ }}
                <option value="{{ item.id }}" {{ item.isDefault ? 'selected="selected"' : '' }}>{{ item.title }}</option>
                {{# }); }}
            </select>
        </div>
    </div>-->
        <div class="layui-form-item">
            <label for="trueName" class="layui-form-label layui-form-required">角色</label>
            <div class="layui-input-block">
                <div id="selectBox" class="xm-select-demo"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="userName" class="layui-form-label layui-form-required">账号</label>
            <div class="layui-input-block">
                <input name="userName" lay-verify="required|verifyuserName" class="layui-input" lay-reqText="请输入账号" placeholder="请输入账号" />
            </div>
        </div>

        <div class="layui-form-item">
            <label for="nickName" class="layui-form-label layui-form-required">姓名</label>
            <div class="layui-input-block">
                <input name="nickName" lay-verify="required|verifynickName" class="layui-input" lay-reqText="请输入姓名" placeholder="请输入姓名" />
            </div>
        </div>
        <div class="layui-form-item">
            <label for="passWord" class="layui-form-label layui-form-required">密码</label>
            <div class="layui-input-block">
                <input name="passWord" lay-verify="required|verifypassWord" class="layui-input" lay-reqText="请输入密码" placeholder="请输入密码"  value="123456"/>
            </div>
        </div>


        <div class="layui-form-item">
            <label for="sex" class="layui-form-label layui-form-required">性别</label>
            <div class="layui-input-block">
                <select name="sex" lay-verify="required" lay-verify="required|number" lay-reqText="请选择性别">
                    <option value="" selected="selected">请选择</option>
                    {{# layui.each(d.params.data.userSexTypes, function(index, item){ }}
                    <option value="{{ item.value }}">{{ item.title }}</option>
                    {{# }); }}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="phone" class="layui-form-label layui-form-required">手机号</label>
            <div class="layui-input-block">
                <input name="phone" lay-verify="required|phone" class="layui-input" lay-reqText="请输入手机号" placeholder="请输入手机号" />
            </div>
        </div>

        <div class="layui-form-item text-right core-hidden">
            <input type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="LAY-app-SysUser-createForm-submit" id="LAY-app-SysUser-createForm-submit" value="确认添加">
        </div>
    </div>
</script>
<script>
    var debug = layui.setter.debug;
    layui.data.done = function (d) {
        //开启调试情况下获取接口赋值数据
        if (debug) { console.log(d.params.data); }
        layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'xmSelect'],
            function () {
                var $ = layui.$
                    , form = layui.form
                    , admin = layui.admin
                    , laydate = layui.laydate
                    , upload = layui.upload
                    , cropperImg = layui.cropperImg
                    , coreHelper = layui.coreHelper
                    , xmSelect = layui.xmSelect;

                var selectBox = xmSelect.render({
                    el: '#selectBox',
                    tips: '请选择角色?',
                    filterable: true,
                    clickClose: true,
                    toolbar: { show: false },
                    name: 'roleIds',
                    //radio: true,
                    prop: {
                        name: 'roleName',
                        value: 'id',
                    },
                    data: d.params.data.roles
                })

                form.on('select(select-companyId-filter)', function (data) {
                    var elem = data.elem; // 获得 select 原始 DOM 对象
                    var value = data.value; // 获得被选中的值
                    var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

                    layer.msg(this.innerHTML + ' 的 value: ' + value); // this 为当前选中 <option> 元素对象

                    coreHelper.Post("Api/SysUser/DepartmentList", { id: value }, function (e) {
                        console.log(e);
                        $('#departmentSelect').empty();
                        $('#groupIdSelect').empty();

                        if (e.data.length > 0) {
                            var firstValue = 0;
                            $.each(e.data, function (h, z) {
                                $('#departmentSelect').append("<option value=" + z.id + ">" + z.depName + "</option>")
                                if (h==0) {
                                    firstValue = z.id;
                                }
                                console.log("dfsfsdfsd", z.id);
                            });

                            if (firstValue) {
                                coreHelper.Post("Api/SysUser/GroupList", { id: firstValue }, function (ed) {
                                    console.log(ed);

                                    if (ed.data.length > 0) {
                                        $('#groupIdSelect').empty();
                                        // $('#groupIdSelect').value();
                                        $.each(ed.data, function (hd, zd) {
                                            $('#groupIdSelect').append("<option value=" + zd.id + ">" + zd.groupName + "</option>")
                                        });
                                        form.render();
                                    }
                                });

                            }
                            console.log(firstValue);
                        }
                        form.render();

                    });
                });
                
                form.on('select(select-departmentId-filter)', function (data) {
                 
                    console.log(data, 'data--->')
                    var elem = data.elem; // 获得 select 原始 DOM 对象
                    var value = data.value; // 获得被选中的值
                    var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
                    layer.msg(this.innerHTML + ' 的 value: ' + value); // this 为当前选中 <option> 元素对象

                    coreHelper.Post("Api/SysUser/GroupList", { id: value }, function (e) {
                        console.log(e);
                        $('#groupIdSelect').empty();

                        if (e.data.length > 0) {
                           // $('#groupIdSelect').value();
                            $.each(e.data, function (h, z) {
                                $('#groupIdSelect').append("<option value=" + z.id + ">" + z.groupName + "</option>")
                            });
                        }
                        form.render();
                    });

                });

                form.verify({

                    verifyuserName: [/^[\S]{0,50}$/, '账号最大只允许输入50位字符，且不能出现空格'],
                    verifypassWord: [/^[\S]{0,100}$/, '密码最大只允许输入100位字符，且不能出现空格'],
                    verifynickName: [/^[\S]{0,50}$/, '昵称最大只允许输入50位字符，且不能出现空格'],
                    verifyavatar: [/^[\S]{0,255}$/, '头像最大只允许输入255位字符，且不能出现空格'],
                    verifyphone: [/^[\S]{0,50}$/, '手机号最大只允许输入50位字符，且不能出现空格'],
                    verifyemail: [/^[\S]{0,50}$/, '邮箱最大只允许输入50位字符，且不能出现空格'],
                    verifytrueName: [/^[\S]{0,50}$/, '真实姓名最大只允许输入50位字符，且不能出现空格'],
                    verifyidCard: [/^[\S]{0,50}$/, '身份证号最大只允许输入50位字符，且不能出现空格'],
                    verifyintroduction: [/^[\S]{0,500}$/, '个人简介最大只允许输入500位字符，且不能出现空格'],
                });
                //重载form
                form.render(null, 'LAY-app-SysUser-createForm');
            })
    };
</script>